.container {
	height: 100%;
	overflow-y: scroll;
	padding-top: 46px;

	::v-deep .van-nav-bar--fixed {
		z-index: 999;
	}
}

.el-drawer__container,
.el-drawer__open {
	position: relative;

	.closeWarpBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 49px;
		height: 100%;
		background-color: #303133;

		.closeBox {
			width: 100%;
			height: 50px;
			background-color: #fff;
			position: absolute;
			left: 0px;
			top: 20px;
			z-index: 88;
			text-align: center;
			border: 1px solid #eee;
			border-right: none;
			border-radius: 15px 0 0 15px;
			cursor: pointer;

			i {
				font-size: 25px;
				line-height: 50px;
			}
		}
	}
}

.el-dialog__body {
	height: 78vh;
	overflow: hidden;
	box-sizing: border-box;

	.cl-dialog__container {
		height: 100%;
		overflow: hidden;
	}
}

::v-deep .drawer-wrap_content {
	box-sizing: border-box;
	background-color: #f2f3f5 !important;
	padding: 10px !important;
	// padding: 10px !important;
	height: 100% !important;
}

::v-deep .el-col-offset-1 {
	margin-left: 3.166667%;
}

.leftBox {
	width: 100%;
	display: flex;
	flex-direction: column;

	.is-selected {
		background: #f3e9ff !important;
	}

	.topBox {
		height: 300px;
		margin-bottom: 10px;

		.el-card,
		.is-always-shadow {
			width: 100%;
			height: 300px;
		}

		.el-calendar {
			padding: 0 !important;
			width: 100%;
			height: 300px;
			font-size: 12px;

			::v-deep .el-button--mini {
				padding: 5px 10px !important;
			}

			::v-deep .el-calendar__header {
				padding: 0 !important;
				padding-bottom: 6px !important;
			}

			::v-deep .el-calendar__body {
				padding: 0 !important;
				width: 100%;
				height: 300px !important;

				.el-calendar-table {
					.el-calendar-table__row {
						td {
							border: 0px !important;
							width: 14%;

							height: 32px;
							cursor: pointer;

							.el-calendar-day {
								width: 100%;
								height: 30px;
								padding: 0 !important;
								line-height: 30px;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}

	.bottomBox {
		width: 100%;
		flex: 1;

		.el-card,
		.is-always-shadow {
		}
	}
}

@media screen and (max-width: 768px) {
	.rightBox {
		margin-top: 15px;
	}

	.col-right {
	}
}

@media screen and (min-width: 769px) {
	.col-right {
		height: 100%;
		max-height: 880px;
	}

	.col-leftRow {
		height: 100%;
	}
}

.rightBox {
	box-sizing: border-box;
	border-radius: 10px;
	width: 100%;
	padding: 10px;
	background: #fff;
	height: 100%;
	flex-direction: column;
	overflow: auto;

	&::-webkit-scrollbar {
		display: none;
	}
}

-webkit-scrollbar {
	display: none;
}

// }
.board {
	&-title {
		font-size: 14px;
		position: relative;
		z-index: 1000;

		.cl-filter {
			margin: 0;

			&__label {
				font-size: 14px;
				color: #7a7a7a;
				margin-right: 0;
			}
		}

		.set-teacher-btn {
			width: auto;
			background-color: #748afc;
			border-color: #748afc;
			margin-left: 10px;
		}
	}

	&-container {
		flex: 1;
		overflow: auto;
		position: relative;
		padding-bottom: 70px;

		.list-item {
			position: absolute;
			z-index: 5;
			width: 110px;
			height: 110px;
			background: $color-primary;
			box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #fff, 1px 1px 0 0 #fff, inset 1px 0 0 0 #fff,
				inset 0 1px 0 0 #fff;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			padding: 10px;
			box-sizing: border-box;
			cursor: pointer;
			overflow: hidden;

			&.is-have {
				cursor: move;
				background: $color-primary;
			}

			&.is-old {
				cursor: move;
				background: #bcbfc5;
			}

			&.is-lost {
				cursor: move;
				background: #d56e77;
			}

			&.is-status {
				cursor: move;
				background: $color-success;
			}

			.name,
			.time {
				margin-bottom: 4px;
			}

			.avatar {
				position: relative;
				margin-bottom: 12px;

				.el-image__inner {
					pointer-events: none;
				}

				.cus_type {
					position: absolute;
					bottom: -8px;
					left: 50%;
					transform: translateX(-50%);
					font-size: 12px;
					box-sizing: border-box;
					width: 40px;
					height: 20px;
					line-height: 18px;
					background-size: 100%;
					background-repeat: no-repeat;
				}
			}

			.name {
				width: 100%;
			}

			.projects {
				flex: 1;
				overflow: hidden;
			}
		}
	}
}

.teacher-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	padding: 10px 14px;
	background-color: #f9f9f9;
	margin-bottom: 10px;

	&_left,
	&_right {
		display: flex;
		align-items: center;
	}

	.teacher-list {
		display: flex;
		align-items: center;
		margin-right: 30px;

		&_img {
			width: 36px;
			height: 36px;
			margin-right: 10px;

			img {
				display: block;
				width: 100%;
			}
		}

		&_label {
			color: #666;
			margin-right: 6px;
		}

		&_linght {
			color: #fa3534;
		}
	}
}
